import Vue from 'vue'
import Router from 'vue-router'
/* Layout */
import Layout from '@/layout'

/**
 * Note: 路由配置项
 *
 * hidden: true                     // 当设置 true 的时候该路由不会再侧边栏出现 如401，login等页面，或者如一些编辑页面/edit/1
 * alwaysShow: true                 // 当你一个路由下面的 children 声明的路由大于1个时，自动会变成嵌套的模式--如组件页面
 *                                  // 只有一个时，会将那个子路由当做根路由显示在侧边栏--如引导页面
 *                                  // 若你想不管路由下面的 children 声明的个数都显示你的根路由
 *                                  // 你可以设置 alwaysShow: true，这样它就会忽略之前定义的规则，一直显示根路由
 * redirect: noRedirect             // 当设置 noRedirect 的时候该路由在面包屑导航中不可被点击
 * name:'router-name'               // 设定路由的名字，一定要填写不然使用<keep-alive>时会出现各种问题
 * query: '{"id": 1, "name": "ry"}' // 访问路由的默认传递参数
 * roles: ['admin', 'common']       // 访问路由的角色权限
 * permissions: ['a:a:a', 'b:b:b']  // 访问路由的菜单权限
 * meta : {
    noCache: true                   // 如果设置为true，则不会被 <keep-alive> 缓存(默认 false)
    title: 'title'                  // 设置该路由在侧边栏和面包屑中展示的名字
    icon: 'svg-name'                // 设置该路由的图标，对应路径src/assets/icons/svg
    breadcrumb: false               // 如果设置为false，则不会在breadcrumb面包屑中显示
    activeMenu: '/system/user'      // 当路由设置了该属性，则会高亮相对应的侧边栏。
  }
 */

// 安装路由
Vue.use(Router)

/**
 * constantRoutes 是一个路由配置数组，其中包含了一组基础页面的路由信息。这些基础页面是指不需要权限限制，所有角色都可以访问的页面。
 */
export const constantRoutes = [
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    /**
     * 在 Vue Router 中，通过配置路由对象的 hidden 属性为 true，可以将该路由隐藏起来，即在导航菜单或路由导航中不显示该路由。
     * 这个路由对象的配置是用于表示登录页的路由信息。通过设置 hidden: true，意味着该登录页路由在导航菜单或路由导航中将不会显示。这通常用于一些不需要在导航菜单中展示的特殊页面，如登录页、404 页面等。
     * 需要注意的是，hidden: true 只是一种约定，具体的路由组件是否真正隐藏还取决于应用程序的具体实现和路由导航组件的处理方式。
     */
    hidden: true
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: '仪表盘', icon: 'dashboard' }
    }]
  },

  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: '示例', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: '表格', icon: 'table' }
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: '树形', icon: 'tree' }
      }
    ]
  },

  {
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: '表单', icon: 'form' }
      }
    ]
  },

  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1',
    name: 'Nested',
    meta: {
      title: '嵌套菜单',
      icon: 'nested'
    },
    children: [
      {
        path: 'menu1',
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        meta: { title: '菜单1' },
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1'),
            name: 'Menu1-1',
            meta: { title: '菜单1-1' }
          },
          {
            path: 'menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2'),
            name: 'Menu1-2',
            meta: { title: '菜单1-2' },
            children: [
              {
                path: 'menu1-2-1',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                name: 'Menu1-2-1',
                meta: { title: '菜单1-2-1' }
              },
              {
                path: 'menu1-2-2',
                component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                name: 'Menu1-2-2',
                meta: { title: '菜单1-2-2' }
              }
            ]
          },
          {
            path: 'menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3'),
            name: 'Menu1-3',
            meta: { title: '菜单1-3' }
          }
        ]
      },
      {
        path: 'menu2',
        component: () => import('@/views/nested/menu2/index'),
        name: 'Menu2',
        meta: { title: '菜单2' }
      }
    ]
  },

  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: '链接跳转', icon: 'link' }
      }
    ]
  },
  // 仿照Form添加Test路由菜单
  {
    path: '/test',
    component: Layout,
    children: [
      {
        // 路径
        path: 'test',
        // 名称
        name: 'Test',
        // 跳转的组件页面
        component: () => import('@/views/test/index'),
        // 路由元信息(HTML标题、图标->https://element.eleme.cn/#/zh-CN/component/icon)
        meta: { title: '测试', icon: 'el-icon-plus' }
      }
    ]
  },
  // 仿照Form添加HID设备菜单
  {
    path: '/hid',
    component: Layout,
    children: [
      {
        // 路径
        path: 'hid',
        // 名称
        name: 'Hid',
        // 跳转的组件页面
        component: () => import('@/views/hid/index'),
        // 路由元信息(HTML标题、图标->https://element.eleme.cn/#/zh-CN/component/icon)
        meta: { title: 'USB设备', icon: 'el-icon-s-platform' }
      }
    ]
  },
  // 仿照Form添加ES搜索菜单
  /* {
    path: '/search',
    component: Layout,
    children: [
      {
        // 路径
        path: 'search',
        // 名称
        name: 'search',
        // 跳转的组件页面
        component: () => import('@/views/search/index'),
        // 路由元信息(HTML标题、图标->https://element.eleme.cn/#/zh-CN/component/icon)
        meta: { title: 'ES搜索', icon: 'el-icon-search' }
      }
    ]
  }, */
  // 仿照Form添加webSocket设备菜单
  {
    path: '/webSocket',
    component: Layout,
    children: [
      {
        // 路径
        path: 'webSocket',
        // 名称
        name: 'WebSocket',
        // 跳转的组件页面
        component: () => import('@/views/websocket/index'),
        // 路由元信息(HTML标题、图标->https://element.eleme.cn/#/zh-CN/component/icon)
        meta: { title: 'WebSocket', icon: 'el-icon-chat-dot-square' }
      }
    ]
  },

  // 404 页面必须放在末尾!!!
  { path: '*', redirect: '/404', hidden: true }
]

/**
 * asyncRoutes
 * 根据用户角色动态加载的路由
 */
export const asyncRoutes = [
  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://github.com/iotjin/jh-vue-admin',
        meta: { title: 'External Link', icon: 'link' }
      }
    ]
  },

  // 404页面路由配置，必须放在最后！
  { path: '*', redirect: '/404', hidden: true }
]


/**
 * 该函数用于创建并返回一个新的 Router 实例，其中包含了路由的配置项。
 */
const createRouter = () => new Router({
  // mode: 'history', // require service support
  // scrollBehavior: () => ({ y: 0 })：这是一个滚动行为配置项，通过指定一个函数来定义路由切换时的滚动行为。在这个例子中，使用箭头函数 () => ({ y: 0 }) 来表示路由切换时，页面滚动到顶部。
  scrollBehavior: () => ({ y: 0 }),
  // constantRoutes 是一个路由数组，用于定义应用程序的基础页面路由。这些路由是不受权限限制的，所有角色都可以访问。
  routes: constantRoutes
})

const router = createRouter()

/**
 * 该函数用于重置 Vue Router 实例，重新创建一个新的路由实例，并将其应用到原有的 router 实例上，从而实现路由的重置。
 * Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
 */
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

/**
 * 将 router 实例作为默认导出，使其可以在其他模块中引入和使用。
 */
export default router
